<script setup lang="ts">
import { nextTick } from 'vue';
//dom分离

//dom元素作为html对象和作为js引用对象，当页面被删除，js的引用对象是还在的
//使用框架如vue,react等后就不用管了，是框架该考虑的了

nextTick(() => {
  let f = <Element>document.querySelector('#f');
  let z = <Element|null>document.querySelector('#z');
  //引用页面元素时，仅仅删除页面元素，不能释放js引用
  setTimeout(() => {
    document.body.removeChild(f);
    //removeChild删除不掉，不知道如何在vue3中删除dom???
    f = null; //必须两个清除（存在父子关系）
    z = null; //必须两个清除（存在父子关系）
  }, 2000)
  // 已分离的DOM
})

</script>

<template>
  <div>内存泄漏-dom</div>
  <div id="f">
    父
    <div id="z">子</div>
  </div>
</template>

<style scoped>

</style>
